<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="./three.js"></script>
    <script>
        var scene = new THREE.Scene();
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.localClippingEnabled = true;
        document.body.appendChild(renderer.domElement);
        renderer.setClearColor(0xffffff);
        var camera = new THREE.OrthographicCamera(- window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, -window.innerHeight / 2, 10, 1000);
        camera.position.z = 500;
        var clipPlanes = [
            new THREE.Plane(new THREE.Vector3(0, 0, -1), 0),
            new THREE.Plane(new THREE.Vector3(-1, 0, 0), 0),
            new THREE.Plane(new THREE.Vector3(0, -1, 0), 0),
        ];
        var group = new THREE.Group();

        function initGeometry() {
            for (var i = 0; i < 15; i++) {
                var geometry = new THREE.SphereBufferGeometry(i * 10, 32, 32);
                var material = new THREE.MeshBasicMaterial({
                    color: new THREE.Color(Math.random(), Math.random(), Math.random()),
                    clipIntersection: true,
                    clippingPlanes: clipPlanes,
                    side: THREE.DoubleSide,
                    opacity: ( Math.random() * 5 + 5 ) / 10,
                    transparent: true,
                    dithering: true,
                    visible: false,
                });
                var sphere = new THREE.Mesh(geometry, material);
                group.add(sphere);
            }
            scene.add(group);
        }
        initGeometry();
        var deg = 0;
        renderer.render(scene, camera);
        function animate() {
            requestAnimationFrame(animate);
            // group.rotation.y += 0.01;
            deg += 1;
            console.log(group.rotation);
            camera.lookAt(0, 0, 0);
            camera.position.set(200 * Math.cos(deg * Math.PI / 180), 0, 200 * Math.sin(deg * Math.PI / 180));
            renderer.render(scene, camera);   
        }

        animate();
    </script>
</body>
</html>
